<template>
	<view class="order-coupon-packbox fixed" v-if="isShowCoupon">
		<comMask v-model="isShowCoupon">
			<view class="relative coupon-info flex-all-center">
				
				<image class="bg" 
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/coupon-info-name.png`" 
					mode=""></image>
			
				<view class="info-content relative flex-all-center flex-direction-column">
					<view
						v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						v-for="(item, index) in couponData"
						:key="index"
						class="info-item flex-align-items-center relative margin-auto"
						@click="handleChoose(item)"
					>
						<image class="relative bg"
						v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
						:src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/coupon-bg.png`" 
						mode=""></image>
					
						<view class="relative item-title">
							<view>{{ item.titile }}</view>
							<view class="item-title-txt">{{ item.subtitile }}</view>
							<view class="item-dates flex">
								<view class="item-dates-txt">到期时间：{{ item.end_time }}</view>
							</view>
						</view>
						
						<view class="item-nums flex-all-center flex-direction-column absolute">
							<view class="item-nums-txt">
								<text style="font-size: 40rpx;">￥</text>
								<text>{{ item.discount }}</text>
							</view>
							
							<view class="item-nums-select relative flex-align-self-end">
								<image class="bg"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/choose.png`" 
								mode=""></image>
								
								<image class="relative" 
								style="width: 20rpx;height: 15rpx;top: 6rpx;left: 6rpx;"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink && couponSelectId === item.id"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/coupons/choose-active.png`" 
								mode=""></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="coupon-oper-content flex-justify-content-around absolute">
					<view class="coupon-oper-img relative" @click="setCloseFun">
						<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close-btn.png`"
						mode=""></image>
					</view>
					<view class="coupon-oper-img relative" @click="setSureFun">
						<image class="bg" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-sure-btn.png`"
						mode=""></image>
					</view>
				</view>
			</view>
		</comMask>
	</view>
</template>

<script>
	export default {
		name: 'comOrderCoupon',
		props: {
			
			couponData: {
				type: Array,
				default: () => []
			},
			currentCouponId: {
				type: String,
				default: () => ''
			},
			value: {
				type: Boolean,
				default: () => true
			},
			
		},

		data() {
			return {
				currentCouponInfo: {},
				couponSelectId: this.currentCouponId,
			};
		},

		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			isShowCoupon: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
		},
		methods: {
			setSureFun() {
				this.$emit('setCouponInfoFun', this.currentCouponInfo);
				this.setCloseFun();
			},
			
			setCloseFun() {
				this.isShowCoupon = false;
			},
			
			handleChoose(item) {
				this.couponSelectId = item.id;
				
				this.currentCouponInfo = {
					couponSelectName: item.subtitile,
					couponSelectId: item.id,
					couponDiscount: item.discount,
				}
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.order-coupon-packbox {
		z-index: 100000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	
		.coupon-info {
			width: 650rpx;
			height: 531rpx;
			
			.popup-title-img {
				width: 600rpx;
				height: 46rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				top: -80rpx;
			}
			
			.info-content {
				width: 600rpx;
				height: 400rpx;
				overflow-y: auto;
				padding: 14rpx 0 40rpx;
				top: 40rpx;
				
				.info-item {
					width: 590rpx;
					height: 174rpx;
					font-size: 20rpx;
					color: #737373;
					padding-left: 28rpx;
					flex: 0 0 auto;
					margin-bottom: 20rpx;
					
					.item-title {
						width: 100%;
						
						.item-title-txt {
							font-size: 40rpx;
							margin-bottom: 32rpx;
							font-weight: bold;
							color: #111111;
						}
						
						.item-dates {
							font-size: 22rpx;
							
							.item-dates-txt {
								color: #999999;
								white-space: nowrap;
							}
						}
					}
					
					.item-nums {
						height: 100%;
						right: 28px;
						
						.item-nums-txt {
							text-align: center;
							font-size: 60rpx;
							color: #FF8B1D;
						}
						.item-nums-select {
							left: -4rpx;
							right: -12rpx;
							width: 31rpx;
							height: 30rpx;
						}
					}
				}
			}
			
			.coupon-oper-content {
				width: 80%;
				bottom: -100rpx;
				
				.coupon-oper-img {
					width: 213rpx;
					height: 60rpx;
					line-height: 64rpx;
				}
			}
		}
	
	}
</style>
